<template>
  <el-container class="layout-container-demo">
    <el-header style="background-color: #4a5e71; height: 6vh">
      <div style="text-align: left; font-size: 28px">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        </el-radio-group>
        <span class="meituan-title">M B T I 问 卷 调 查 管 理 系 统</span>
      </div>
    </el-header>
    <el-container style="background-color: #4a5e71; height: 83vh">
      <el-scrollbar>
        <el-menu class="el-menu-vertical-demo" :collapse="isCollapse">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><eleme /></el-icon>
              <span>Menu</span>
            </template>

            <el-menu-item-group>
              <el-menu-item
                index="1-1"
                @click="this.$router.push({ path: '/teststart' })"
                >MBTI</el-menu-item
              >

              <el-sub-menu index="1-2">
                <template #title><span>Introduce</span></template>

                <el-menu-item index="1-2-1" @click="this.$router.push('/INTJ')">
                  INTJ-建筑师
                </el-menu-item>

                <el-menu-item index="1-2-2" @click="this.$router.push('/INTP')">
                  INTP-逻辑学家
                </el-menu-item>

                <el-menu-item index="1-2-3" @click="this.$router.push('/ENTJ')">
                  ENTJ-指挥者
                </el-menu-item>

                <el-menu-item index="1-2-4" @click="this.$router.push('/ENTP')">
                  ENTP-辩论家
                </el-menu-item>

                <el-menu-item index="1-2-5" @click="this.$router.push('/INFJ')">
                  INFJ-提倡者
                </el-menu-item>

                <el-menu-item index="1-2-6" @click="this.$router.push('/INFP')">
                  INFP-调停者
                </el-menu-item>

                <el-menu-item index="1-2-7" @click="this.$router.push('/ENFJ')">
                  ENFJ-主人公
                </el-menu-item>

                <el-menu-item index="1-2-8" @click="this.$router.push('/ENFP')">
                  ENFP-竞选者
                </el-menu-item>

                <el-menu-item index="1-2-9" @click="this.$router.push('/ISTJ')">
                  ISTJ-物流师
                </el-menu-item>

                <el-menu-item
                  index="1-2-10"
                  @click="this.$router.push('/ISFJ')"
                >
                  ISFJ-守卫者
                </el-menu-item>

                <el-menu-item
                  index="1-2-11"
                  @click="this.$router.push('/ESTJ')"
                >
                  ESTJ-总经理
                </el-menu-item>

                <el-menu-item
                  index="1-2-12"
                  @click="this.$router.push('/ESFJ')"
                >
                  ESFJ-执政官
                </el-menu-item>

                <el-menu-item
                  index="1-2-13"
                  @click="this.$router.push('/ISTP')"
                >
                  ISTP-鉴赏家
                </el-menu-item>

                <el-menu-item
                  index="1-2-14"
                  @click="this.$router.push('/ISFP')"
                >
                  ISFP-探险家
                </el-menu-item>

                <el-menu-item
                  index="1-2-15"
                  @click="this.$router.push('/ESTP')"
                >
                  ESTP-企业家
                </el-menu-item>

                <el-menu-item
                  index="1-2-16"
                  @click="this.$router.push('/ESFP')"
                >
                  ESFP-表演者
                </el-menu-item>
              </el-sub-menu>
            </el-menu-item-group>
          </el-sub-menu>

          <el-menu-item index="2" @click="this.$router.push('/select')">
            <el-icon class="el-icon-user"><user /></el-icon>
            <template #title>Search student</template>
          </el-menu-item>

          <el-menu-item index="3" @click="this.$router.push('/view')">
            <el-icon><camera /></el-icon>
            <template #title>Find user</template>
          </el-menu-item>

          <el-menu-item index="4" @click="this.$router.push('/tips')">
            <el-icon><star /></el-icon>
            <template #title>view</template>
          </el-menu-item>

          <el-menu-item index="5" @click="this.$router.push('/login')">
            <el-icon><delete /></el-icon>
            <template #title>Exit</template>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>

      <el-main
        ><el-scrollbar>
          <div>
            <el-row type="flex" justify="center">
              <el-col :span="1"></el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="18.5">
                <el-card shadow="always" color="black" class="card1">
                  <router-view />
                </el-card>
              </el-col>
            </el-row></div
        ></el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ref } from "vue";

export default {
  name: "index",
  data() {
    return {
      // pongStr: "",
    };
  },
  methods: {},
  setup() {
    const isCollapse = false;
    return { isCollapse };
  },
};
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  color: rgb(255, 255, 255);
}
.layout-container-demo .el-menu {
  border-right: none;
  color: rgb(255, 255, 255);
}
.layout-container-demo .el-main {
  padding: 0;
  text-align: center;
  background-image: url("../assets/1.jpg");
  background-size: 100% 100%;
}

.layout-container-demo {
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.card1 {
  height: auto;
  width: 1100px;
  border-radius: 30px;
}
.el-row {
  margin-bottom: 50px;
}
.image {
  width: 100%;
  display: block;
}
.meituan-title {
  font-weight: bold;
  text-align: center;
  color: #fff;
  font-size: 30px;
  padding-top: 0px;
  font-family: Arial, Helvetica, sansserif;
}
</style>
